<template>
    <section class="houseDetails-public-header-content MarketSituation-box">
        <header>
            <img src="../../../../static/img/title-bg-img-left.jpg" alt="">
            <span>市场概况</span>
            <img src="../../../../static/img/title-bg-img-right.jpg" alt="">
        </header>
        <div class="content clearfix">
            <el-row>
                <el-col :span="24">
                    <Zip_PctOfHomesDecreasingInValues_AllHomes></Zip_PctOfHomesDecreasingInValues_AllHomes>
                </el-col>
                <el-col :span="24">
                    <Zip_PctOfHomesIncreasingInValues_AllHomes></Zip_PctOfHomesIncreasingInValues_AllHomes>
                </el-col>
                <el-col :span="24">
                    <Zip_PctOfListingsWithPriceReductions_AllHomes></Zip_PctOfListingsWithPriceReductions_AllHomes>
                </el-col>
                <el-col :span="24">
                    <Zip_PctOfListingsWithPriceReductions_Condominum></Zip_PctOfListingsWithPriceReductions_Condominum>
                </el-col>
                <el-col :span="24">
                    <Zip_PctOfListingsWithPriceReductions_SingleFamilyResidence></Zip_PctOfListingsWithPriceReductions_SingleFamilyResidence>
                </el-col>
                <el-col :span="24">
                    <InventoryMeasure_SSA_Zip_Public></InventoryMeasure_SSA_Zip_Public>
                </el-col>
                <el-col :span="24">
                    <InventoryMeasure_Zip_Public></InventoryMeasure_Zip_Public>
                </el-col>

                <el-col :span="24">
                    <InventoryMeasure_Tiers_Metro_Public></InventoryMeasure_Tiers_Metro_Public>
                </el-col>

                <el-col :span="24">
                    <Affordability_Wide_2018Q2_Public_Market></Affordability_Wide_2018Q2_Public_Market>
                </el-col>
                <el-col :span="24">
                    <Metro_NETiers_2017Q4></Metro_NETiers_2017Q4>
                </el-col>
                <el-col :span="24">
                    <NegativeEquity_2017Q4_Public></NegativeEquity_2017Q4_Public>
                </el-col>

                <el-col :span="24">
                    <MonthlyTurnover_Zip></MonthlyTurnover_Zip>
                </el-col>
                <el-col :span="24">
                    <ForeclosuresPer10Khomes_Zip></ForeclosuresPer10Khomes_Zip>
                </el-col>


                <el-col :span="24">
                    <BuyerSellerIndex_Zip></BuyerSellerIndex_Zip>
                </el-col>
                <el-col :span="24">
                    <MarketHealthIndex_Zip></MarketHealthIndex_Zip>
                </el-col>

            </el-row>
        </div>
    </section>
</template>

<script>
    import Zip_PctOfHomesDecreasingInValues_AllHomes from './Zip_PctOfHomesDecreasingInValues_AllHomes.vue';//市场概况——房产房价下跌所占比例——%大数据量面积折线图
    import Zip_PctOfHomesIncreasingInValues_AllHomes from './Zip_PctOfHomesIncreasingInValues_AllHomes.vue';//市场概况——房价升值房产所占比例——%大数据量面积折线图
    import Zip_PctOfListingsWithPriceReductions_AllHomes from './Zip_PctOfListingsWithPriceReductions_AllHomes.vue';//市场概况——降价房产比例（所有房产）——%大数据量面积折线图
    import Zip_PctOfListingsWithPriceReductions_Condominum from './Zip_PctOfListingsWithPriceReductions_Condominum.vue';//市场概况——降价房产比例（公寓及联排）——%大数据量面积折线图
    import Zip_PctOfListingsWithPriceReductions_SingleFamilyResidence from './Zip_PctOfListingsWithPriceReductions_SingleFamilyResidence.vue';//市场概况——降价房产比例（独栋别墅）——%大数据量面积折线图
    import InventoryMeasure_SSA_Zip_Public from './InventoryMeasure_SSA_Zip_Public.vue';//市场概况——存量房季度调整后数字——时间轴折线图
    import InventoryMeasure_Zip_Public from './InventoryMeasure_Zip_Public.vue';//市场概况——存量房数字——柱状图

    import InventoryMeasure_Tiers_Metro_Public from './InventoryMeasure_Tiers_Metro_Public.vue';//市场概况——存量房数字及高中低价位房产分布比例（本都会区）——柱状图

    import Affordability_Wide_2018Q2_Public_Market from './Affordability_Wide_2018Q2_Public_Market.vue';//市场概况——房价与家庭年收入的比例——%大数据量面积折线图
    import Metro_NETiers_2017Q4 from './Metro_NETiers_2017Q4.vue';//市场概况——负资产率（本都会区）——文字说明
    import NegativeEquity_2017Q4_Public from './NegativeEquity_2017Q4_Public.vue';//市场概况——负资产率（本城市）——%大数据量面积折线图

    import MonthlyTurnover_Zip from './MonthlyTurnover_Zip.vue';//市场概况——房产换手率——%大数据量面积折线图
    import ForeclosuresPer10Khomes_Zip from './ForeclosuresPer10Khomes_Zip.vue';//市场概况——法拍房比例（10000个房产里面的法拍个数）——%大数据量面积折线图

    import BuyerSellerIndex_Zip from './BuyerSellerIndex_Zip.vue';//市场概况——买方卖方指数——文字说明
    import MarketHealthIndex_Zip from './MarketHealthIndex_Zip.vue';//市场概况——市场健康指数——文字说明

    export default {
        data() {
            return {
                houseId: this.$route.query.houseId || null, //房源zip
                zip: this.$route.query.zip || null, //房源zip
            }
        },
        created() {
        },
        mounted() {
            this.$store.commit('set_houseDetailsZipcode', this.zip);
            //获取房源基本信息数据
            this.getHouseBasicInfo();
        },
        computed: {},
        methods: {
            //获取房源基本信息数据
            getHouseBasicInfo(){
                this.$get(`/house/${this.houseId}/basicInfo`).then(res => {
                    if (res.status == 0) {
                        // 房源详情页zil图表判断房源户型和几居室使用——房源基本信息
                        this.$store.commit('set_houseDetailsBasicInfo', res.data);
                    }else{
                        console.log(res.msg);
                    }
                });
            },
        },
        components: {
            Zip_PctOfHomesDecreasingInValues_AllHomes,//市场概况——房产房价下跌所占比例——%大数据量面积折线图
            Zip_PctOfHomesIncreasingInValues_AllHomes,//市场概况——房价升值房产所占比例——%大数据量面积折线图
            Zip_PctOfListingsWithPriceReductions_AllHomes,//市场概况——降价房产比例（所有房产）——%大数据量面积折线图
            Zip_PctOfListingsWithPriceReductions_Condominum,//市场概况——降价房产比例（公寓及联排）——%大数据量面积折线图
            Zip_PctOfListingsWithPriceReductions_SingleFamilyResidence,//市场概况——降价房产比例（独栋别墅）——%大数据量面积折线图
            InventoryMeasure_SSA_Zip_Public,//市场概况——存量房季度调整后数字——时间轴折线图
            InventoryMeasure_Zip_Public,//市场概况——存量房数字——柱状图

            InventoryMeasure_Tiers_Metro_Public,//市场概况——存量房数字及高中低价位房产分布比例（本都会区）——柱状图

            Affordability_Wide_2018Q2_Public_Market,//市场概况——房价与家庭年收入的比例——%大数据量面积折线图
            Metro_NETiers_2017Q4,//市场概况——负资产率（本都会区）——文字说明
            NegativeEquity_2017Q4_Public,//市场概况——负资产率（本城市）——%大数据量面积折线图

            MonthlyTurnover_Zip,//市场概况——房产换手率——%大数据量面积折线图
            ForeclosuresPer10Khomes_Zip,//市场概况——法拍房比例（10000个房产里面的法拍个数）——%大数据量面积折线图

            BuyerSellerIndex_Zip,//市场概况——买方卖方指数——文字说明
            MarketHealthIndex_Zip,//市场概况——市场健康指数——文字说明

        }
    }
</script>

<style lang="less" type="text/less">
    .MarketSituation-box {
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        > header {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            > span {
                padding: 0 5px;
                font-size: 30px;
                color: #00bc84;
            }
            >img{
                display: inline-block;
                max-width: 100px;
            }
        }
        >.content {
            padding: 15px;
            width: 100%;
            overflow: hidden;
            >.el-row {
                .el-col:first-of-type{
                    .echart-chart {
                        margin: 0;
                    }
                }
                .el-col {
                    padding: 0;
                    .echart-chart {
                        margin: 30px 0 0 0;
                        > .inside {
                            border: 1px solid #dee2e5;
                            padding: 0;
                            > header {
                                padding: 13px 20px;
                                background: #edf7ff;
                                font-size: 18px;
                                color: #242424;
                                border-bottom: 1px solid #dee2e5;
                                > i {
                                    font-size: 20px;
                                    color: #ff7500;
                                }
                            }
                            > .chartBox {
                                width: 100%;
                                text-align: center;
                                position: relative;
                                background: #fff;
                                >article {
                                    > .el-radio-group {
                                        padding: 15px 0;
                                        > .el-radio + .el-radio {
                                            margin-left: 15px;
                                        }
                                    }

                                    > .regionType-button {
                                        > div {
                                            padding: 10px;
                                            float: right;
                                        }
                                    }

                                    > .chart-div {
                                        width: 100%;
                                        height: 250px;
                                    }

                                    > p {
                                        color: #ff7b2c;
                                        text-align: left;
                                        margin: 5px 0;
                                        padding: 0 10px;
                                    }
                                }
                                > h4 {
                                    min-height: 100px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 20px;
                                    color: #000;
                                    text-align: center;
                                }
                                aside {
                                    text-align: left;
                                    padding: 20px;
                                    > p {
                                        line-height: 30px;
                                        color: #000;
                                        > span {
                                            color: #858585;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

